SVG #4 stroke-dasharray
1 Using this striaght line to demonstrate
<line x1="0" y1="0" x2="50" y2="0" stroke="black" />
2 When stroke-dasharray has one single number
stroke-dasharray="10"
The dash and gap are both of length 10.
3 When stroke-dasharray has two numbers
stroke-dasharray="10 5"
The dashes are of length 10.
The gaps are of length 5.
4 When stroke-dasharray has four numbers
stroke-dasharray="10 5 8 3"
- dash 10,
- gap 5,
- second dash 8,
- second gap 3,
and this is the cycle.
5 What if single number of numbers?
stroke-dasharray="10 5 3"
The cycle becomes like this:
- dash 10,
- gap 5,
- dash 3,
- Now,it should be GAP,but with length 10
- DASH 5
- GAP 3
6 Apply stroke-dasharray on curve
<path d="M 10 40 C 10 50 40 50 40 40 Z" stroke="black" fill="none" stroke-dasharray="10 5" />
It is ok too.